<template>
  <div>
    <ol class="quick-ol">
      <template v-for="(record, id) in quickentrydata">
        <li :key="id" v-if="record.auth">
          <div :class="quickentryclass(record)" @click="clickItems(record)">
            <div class="quick-text" :class="{en:$i18n.locale === 'en-US'}">
              <a><span :style="quickfontsize(record)">{{ cutlength(record.text,8) }}</span></a>
            </div>
          </div>
        </li>
      </template>
    </ol>
  </div>
</template>

<script>
export default {
  name: 'quickEntryIndex',
  data () {
    return {
      quickentrydata: [
        {
          id: 3,
          text: this.$t('all.autotext1634'), // 受试者管理
          imgName: 'increaseVideoChat',
          imgWidth: 32,
          imgHeight: 32,
          url: '2',
          auth: this.$auth('PROJECT.PROJECT_PATIENT')
        },
        {
          id: 4,
          text: this.$t('all.autotext1635'), // 受试者费用申请
          imgName: 'increaseVideoChat',
          imgWidth: 32,
          imgHeight: 32,
          url: '2',
          auth: this.$auth('PROJECT.PROJECT_FEE_PATIENT')
        },
        {
          id: 1,
          text: this.$t('all.autotext1636'), // 费用审核
          imgName: 'increaseConsent',
          imgWidth: 25,
          imgHeight: 28,
          url: '2',
          auth: this.$auth('PROJECT.PROJECT_FEE_REVIEW')
        },
        {
          id: 2,
          text: this.$t('all.autotext1633'), // 研究者费用申请
          imgName: 'increaseParticipant',
          imgWidth: 28,
          imgHeight: 28,
          url: '2',
          auth: this.$auth('PROJECT.PROJECT_FEE_RESEARCHER')
        }
      ]
    }
  },
  props: {
    orgOptions: {
      type: Array,
      required: true
    },
    projectInfos: {
      type: Object,
      required: true
    }
  },
  methods: {
    quickentryclass (record) {
      let classStyle = ''
      if (record.id === 1) {
        classStyle = 'quickentry-blue'
      } else if (record.id === 2) {
        classStyle = 'quickentry-orange'
      } else if (record.id === 3) {
        classStyle = 'quickentry-deepblue'
      } else if (record.id === 4) {
        classStyle = 'quickentry-green'
      } else {
        classStyle = 'quickentry-orangered'
      }
      return classStyle
    },
    quickfontsize (record) {
      let fontclass = 'font-size: 14px;line-height: 20px;'
      if (record.text.length > 5) {
        fontclass = 'font-size: 12px;line-height: 20px;'
      }
      return fontclass
    },
    cutlength (text, len) {
      if (this.$i18n.locale === 'en-US') {
        return text
      }
      if (text.length >= len) {
        text = text.substring(0, len) + '...'
      }
      return text
    },
    async clickItems (record) {
      if (record.id === 1) {
        this.$router.push({ path: '/expense-audit' })
      } else if (record.id === 2) {
        this.$router.push({ path: '/cost-apply/researcher-list' })
      } else if (record.id === 3) {
        this.$router.push({ path: '/subject-manage-list' })
      } else if (record.id === 4) {
        this.$router.push({ path: '/cost-apply/subject-list' })
      }
    }
  }
}
</script>

<style lang="less" scoped>

  .quick-ol {
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
  }

  .quickentry-blue {
    width: 80px;
    height: 80px;
    background: linear-gradient(138deg, #33D3E8 0%, #3BB3E4 100%);
    border-radius: 12px;
    margin: 10px 0px 10px 10px;
    float: left;
    // text-align: center;
    display: flex;
    align-items: center;
  }

  .quickentry-orange {
    width: 80px;
    height: 80px;
    background: linear-gradient(333deg, #FF9D3C 0%, #F7C457 100%);
    border-radius: 12px;
    margin: 10px 0px 10px 10px;
    float: left;
    display: flex;
    align-items: center;
    padding:10px;
    box-sizing: border-box;
    span{
      margin-top: -8px !important;
      display: flex;
      align-items: center;
    }
  }

  .quickentry-deepblue {
    width: 80px;
    height: 80px;
    background: linear-gradient(136deg, #AA93FF 0%, #61A1ED 100%);
    border-radius: 12px;
    margin: 10px 0px 10px 10px;
    float: left;
    display: flex;
    align-items: center;
  }

  .quickentry-green {
    width: 80px;
    height: 80px;
    background: linear-gradient(136deg, #59E1B8 0%, #3CC872 100%);
    border-radius: 12px;
    margin: 10px 0px 10px 10px;
    float: left;
    display: flex;
    align-items: center;
    padding:10px;
    box-sizing: border-box;
    span{
      margin-top: -8px !important;
      display: flex;
      align-items: center;
    }
  }

  .quickentry-orangered {
    width: 80px;
    height: 80px;
    background: linear-gradient(136deg, #FFA35A 0%, #FF6E7A 100%);
    border-radius: 12px;
    margin: 10px 0px 10px 10px;
    float: left;
    display: flex;
    align-items: center;
  }

  .quick-icon {
    height: 50px;
    font-size: 25px;
    line-height: 50px;
    color: #FFFFFF;
    text-align: center;
  }

  .quick-text {
    width: 100%;
    height: 20px;
    text-align: center;
  }

  .en{
    height: auto;
  }

  .quick-text a {
    font-family: PingFangSC-Medium, PingFang SC;
    color: #FFFFFF;
  }
</style>
